/* eslint-disable no-unused-expressions */
<template>
  <div>
    <card v-if="$store.state.superAdmin == 'true'" style="margin-bottom: 10px">
      <el-select
        style="width: 100%"
        v-model="museumId"
        @change="change"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </card>
     <card>
      <div class="flexCSB">
        <div>
          <el-button
            type="primary"
            @click="openModal"
            :loading="loading1"
            style="margin-left: 10px"
            >一键设置</el-button
          >
        </div>
      </div>
      <Table
            class="table"
            :loading="loading2"
            highlight-row
            :columns="columns"
            :data="data"
          ></Table>
          <Modal :mask-closable="false" title="详情" v-model="modal1" width="50">
            <Table
            class="table"
            highlight-row
            :columns="columns1"
            :data="data1"
            ></Table>
            <div slot="footer"></div>
          </Modal>
          <Modal :mask-closable="false" title="时间段" v-model="modal2" width="50">
            <Table
            class="table"
            highlight-row
            :columns="columns2"
            :data="data2"
            ></Table>
            <div slot="footer"></div>
          </Modal>
          <Modal :mask-closable="false" title="操作" v-model="modal" width="50">
            <Form ref="form" :model="newData" :label-width="160" width="50">
              <FormItem label="*星期：">
                <el-checkbox-group v-if="!addOrUpdate" v-model="newData.weeks">
                    <el-checkbox-button v-for="item in weeks" :style="{width:'80px'}" :label="item.value" :key="item.value">{{item.week}}</el-checkbox-button>
                </el-checkbox-group>
                <el-radio-group v-if="addOrUpdate" v-model="week">
                    <el-radio-button v-for="item in weeks" :style="{width:'80px'}" :label="item.value" :key="item.value">{{item.week}}</el-radio-button>
                </el-radio-group>
              </FormItem>
              <FormItem label="需要提前几天预约：">
                <InputNumber
                  style="width: 100%"
                  placeholder="请输入需要提前预约的天数"
                  :min="0"
                  v-model="newData.advanceDays"
                ></InputNumber>
              </FormItem>
              <FormItem label="最多预约几天内：">
                <InputNumber
                  style="width: 100%"
                  placeholder="请输入最多预约天数"
                  :min="0"
                  v-model="newData.mostDays"
                ></InputNumber>
              </FormItem>
              <FormItem label="时间段：">
            <template v-for="(item, key) in timeList">
              <div style="display: flex; align-items: center" :key="key">
                <TimePicker
                disabled
                  transfer
                  format="HH:mm"
                  type="timerange"
                  :clearable="clearable"
                  placement="bottom-start"
                  placeholder="请选择时间"
                  style="width: 400px; margin: 5px 0"
                  v-model="item.sessionTime"
                ></TimePicker>
                <Input-number placeholder="请输入名额" style="width: 100px; margin: 10px 10px" :clearable="clearable" :min="0" v-model="item.num"></Input-number>
                <Icon
                  type="ios-close-circle-outline"
                  size="24"
                  @click="del(key)"
                  style="margin-left: 10px; cursor: pointer"
                />
              </div>
            </template>
          </FormItem>
              <!-- <FormItem label="*总预约名额：">
                <InputNumber
                  style="width: 100%"
                  placeholder="请输入总预约名额"
                  :min="0"
                  v-model="newData.quota"
                ></InputNumber>
              </FormItem> -->
              <!-- 				<FormItem label="上午预约名额：">
					<InputNumber style="width:100%" placeholder="请输入上午预约名额，如果不设置上午接待人数，可以不输入" :min="0" v-model="newData.amQuota"></InputNumber>
				</FormItem>
				<FormItem label="下午预约名额：">
					<InputNumber style="width:100%" placeholder="请输入下午预约名额，如果不设置下午接待人数，可以不输入" :min="0" v-model="newData.pmQuota"></InputNumber>
				</FormItem> -->

            </Form>
            <div slot="footer">
              <Button type="warning" class="Button" @click="close"
                >关闭</Button
              >
              <Button
                type="success"
                class="Button"
                :loading="loading2"
                @click="submit"
                >提交</Button
              >
            </div>
          </Modal>
          <Modal :mask-closable="false" title="详情" v-model="modal2" width="50">
            <Form ref="form" :model="newData" :label-width="160" width="50">
              <FormItem label="*星期：">
                <!-- <el-checkbox-group v-model="newData.weeks">
                    <el-checkbox-button v-for="item in weeks" :style="{width:'80px'}" :label="item.value" :key="item.value">{{item.week}}</el-checkbox-button>
                </el-checkbox-group> -->
                <el-radio-group v-model="week">
                    <el-radio-button v-for="item in weeks" :style="{width:'80px'}" :label="item.value" :key="item.value">{{item.week}}</el-radio-button>
                </el-radio-group>
                <!-- <el-radio-group v-if="addOrUpdate" v-model="week">
                    <el-radio-button v-for="item in weeks" :style="{width:'80px'}" :label="item.value" :key="item.value">{{item.week}}</el-radio-button>
                </el-radio-group> -->
              </FormItem>
              <FormItem label="需要提前几天预约：">
                <InputNumber
                disabled
                  style="width: 100%"
                  placeholder="请输入需要提前预约的天数"
                  :min="0"
                  v-model="newData.advanceDays"
                ></InputNumber>
              </FormItem>
              <FormItem label="最多预约几天内：">
                <InputNumber
                disabled
                  style="width: 100%"
                  placeholder="请输入最多预约天数"
                  :min="0"
                  v-model="newData.mostDays"
                ></InputNumber>
              </FormItem>
              <FormItem label="时间段：">
            <template v-for="(item, key) in timeList">
              <div style="display: flex; align-items: center" :key="key">
                <TimePicker
                disabled
                  transfer
                  format="HH:mm"
                  type="timerange"
                  :clearable="clearable"
                  placement="bottom-start"
                  placeholder="请选择时间"
                  style="width: 400px; margin: 5px 0"
                  v-model="item.sessionTime"
                ></TimePicker>
                <Input-number disabled placeholder="请输入名额" style="width: 100px; margin: 10px 10px" :clearable="clearable" :min="0" v-model="item.num"></Input-number>
              </div>
            </template>
            </Tooltip>
          </FormItem>
              <!-- <FormItem label="*总预约名额：">
                <InputNumber
                  style="width: 100%"
                  placeholder="请输入总预约名额"
                  :min="0"
                  v-model="newData.quota"
                ></InputNumber>
              </FormItem> -->
              <!-- 				<FormItem label="上午预约名额：">
					<InputNumber style="width:100%" placeholder="请输入上午预约名额，如果不设置上午接待人数，可以不输入" :min="0" v-model="newData.amQuota"></InputNumber>
				</FormItem>
				<FormItem label="下午预约名额：">
					<InputNumber style="width:100%" placeholder="请输入下午预约名额，如果不设置下午接待人数，可以不输入" :min="0" v-model="newData.pmQuota"></InputNumber>
				</FormItem> -->

            </Form>
            <div slot="footer"></div>
          </Modal>
     </card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      week: '',
      modal1: false,
      modal2: false,
      loading7: false,
      addOrUpdate: false,
      modal: false,
      timeList: [],
      weeks: [
        {
          week: '星期一',
          value: '1'
        },
        {
          week: '星期二',
          value: '2'
        },
        {
          week: '星期三',
          value: '3'
        },
        {
          week: '星期四',
          value: '4'
        },
        {
          week: '星期五',
          value: '5'
        },
        {
          week: '星期六',
          value: '6'
        },
        {
          week: '星期日',
          value: '7'
        }
      ],
      newData: {
        advanceDays: '',
        mostDays: '',
        weeks: ['1', '2', '3', '4', '5', '6', '7']
      },
      modal2: false,
      museumId: '',
      museumList: [],
      current: 1,
      size: 10,
      total: 0,
      data1: [],
      headers: {},
      columns: [
        { title: '星期', key: 'dayOfWeek1', align: 'center', minWidth: 150 },
        // {title:'上午预约名额',key:'amQuota2',align: 'center',minWidth:150},
        // {title:'下午预约名额',key:'pmQuota2',align: 'center',minWidth:150},
        {
          title: '提前几天预约',
          key: 'advanceDays1',
          align: 'center',
          minWidth: 150
        },
        {
          title: '最多预约几天内',
          key: 'mostDays1',
          align: 'center',
          minWidth: 150
        },
        { title: '总预约名额', key: 'num1', align: 'center', minWidth: 150 },
        {
          title: '操作',
          align: 'center',
          minWidth: 280,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.update(params)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'warning'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.detail(params)
                    }
                  }
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error'
                  },
                  on: {
                    click: () => {
                      this.delItem(params)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      columns1: [
        { title: '星期', key: 'dayOfWeek1', align: 'center', minWidth: 150 },
        // {title:'上午预约名额',key:'amQuota2',align: 'center',minWidth:150},
        // {title:'下午预约名额',key:'pmQuota2',align: 'center',minWidth:150},
        {
          title: '提前几天预约',
          key: 'advanceDays1',
          align: 'center',
          minWidth: 150
        },
        {
          title: '最多预约几天内',
          key: 'mostDays1',
          align: 'center',
          minWidth: 150
        },
        {
          title: '时间段',
          align: 'center',
          minWidth: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.show(params)
                    }
                  }
                },
                '查看'
              )
            ])
          }
        }
      ],
      columns2: [
        { title: '时间段', key: 'sessionTime', align: 'center', minWidth: 150 },
        // {title:'上午预约名额',key:'amQuota2',align: 'center',minWidth:150},
        // {title:'下午预约名额',key:'pmQuota2',align: 'center',minWidth:150},
        { title: '预约名额', key: 'num1', align: 'center', minWidth: 150 }
      ],
      data: [],
      data2: []
    }
  },
  created () {
    this.headers = {
      token: localStorage.getItem('token')
    }
    if (this.$store.state.superAdmin == 'true') {
      this.getMuseumList()
    } else {
      if (this.$store.state.museums.length > 1) {
        this.museumId = this.$store.state.museumId
      } else {
        this.museumId = ''
      }
    }
    console.log(this.museumId)
  },

  mounted () {

  },
  watch: {
    'modal' () {
      console.log(111)
      this.newData = {
        advanceDays: '',
        mostDays: '',
        weeks: ['1', '2', '3', '4', '5', '6', '7']
      },
      this.timeList = []
    }
  },
  methods: {
    detail (params) {
      this.newData = {
        advanceDays: '',
        mostDays: '',
        weeks: ['1', '2', '3', '4', '5', '6', '7']
      },
      this.timeList = []
      this.$http('/stage/reservation/getReservationMuseumTeamRuleDetail', {
        museumId: this.museumId,
        dayOfWeek: params.row.dayOfWeek
      }, 'post', (res) => {
        if (res.data.code == 200) {
          console.log(res.data.data)
          // this.data1.push(res.data.data)
          // for (let i = 0; i < this.data1.length; i++) {
          // switch (this.data1[i].dayOfWeek) {
          //   case 1:
          //     this.data1[i].dayOfWeek1 = '星期一'
          //     break
          //   case 2:
          //     this.data1[i].dayOfWeek1 = '星期二'
          //     break
          //   case 3:
          //     this.data1[i].dayOfWeek1 = '星期三'
          //     break
          //   case 4:
          //     this.data1[i].dayOfWeek1 = '星期四'
          //     break
          //   case 5:
          //     this.data1[i].dayOfWeek1 = '星期五'
          //     break
          //   case 6:
          //     this.data1[i].dayOfWeek1 = '星期六'
          //     break
          //   case 7:
          //     this.data1[i].dayOfWeek1 = '星期日'
          //     break
          // }

          // if (this.data1[i].mostDays != undefined) {
          //   this.data1[i].mostDays1 = this.data1[i].mostDays + '天内'
          // }
          // if (this.data1[i].advanceDays != undefined) {
          //   this.data1[i].advanceDays1 = this.data1[i].advanceDays + '天'
          // }
          // }
          // let weeks = []
          // weeks.push(String(res.data.data.dayOfWeek))
          this.newData = {
            advanceDays: res.data.data.advanceDays,
            mostDays: res.data.data.mostDays,
            // weeks: weeks
          }
          this.week=res.data.data.dayOfWeek
          res.data.data.sessionList.map(item => {
            this.timeList.push({
              sessionTime: item.sessionTime.split('-'),
              num: item.num
            })
          })

          this.modal2 = true
        }
      })
    },
    show (params) {
      this.data2 = params.row.sessionList
      for (var i = 0; i < this.data2.length; i++) {
        if (this.data2[i].num != undefined) {
          this.data2[i].num1 = this.data2[i].num + '人'
        }
      }
      this.modal2 = true
    },
    openModal () {
      this.addOrUpdate = false
      this.$http('/stage/reservation/getReservationMuseumArrivalRangeDropdown', {
        museumId: this.museumId
      }, 'get', (res) => {
        console.log(res)
        if (res.data.code == 200) {
          res.data.data.map(item => {
            this.timeList.push({
              sessionTime: item.timeRange.split('-'),
              num: ''
            })
          })
        }
      })
      this.modal = true
    },
    update (params) {
      this.modal = true
      this.addOrUpdate = true
      console.log(params.row)
      this.$http('/stage/reservation/getReservationMuseumTeamRuleDetail', {
        dayOfWeek: params.row.dayOfWeek,
        museumId: this.museumId
      }, 'post', (res) => {
        console.log(res)
        if (res.data.code == 200) {
          let weeks = []
          weeks.push(String(res.data.data.dayOfWeek))
          this.week = res.data.data.dayOfWeek
          this.newData = {
            advanceDays: res.data.data.advanceDays,
            mostDays: res.data.data.mostDays,
            weeks: weeks
          },
          res.data.data.sessionList.map(item => {
            item.sessionTime = item.sessionTime.split('-')
          })
          this.timeList = res.data.data.sessionList
        }
      })
    },

    delItem (params) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定要删除此规则吗？</p>',
        onOk: () => {
          this.$http(
            '/stage/reservation/deleteReservationMuseumTeamRule',
            {
              dayOfWeek: params.row.dayOfWeek,
              museumId: this.museumId
            },
            'post',
            (res) => {
              if (res.data.code == 200) {
                if (res.data.data) {
                  this.$Message.success('删除规则成功')
                } else {
                  this.$Message.error('删除规则失败')
                }
                this.getReservationMuseumTeamRuleDTO()
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          )
        }
      })
    },
    getReservationMuseumTeamRuleDTO () {
      this.loading2 = true
      this.$http('/stage/reservation/getReservationMuseumTeamRuleDTO', {
        museumId: this.museumId
      }, 'post', (res) => {
        console.log(res)
        if (res.data.code == 200) {
          this.data = res.data.data
          for (let i = 0; i < this.data.length; i++) {
            switch (this.data[i].dayOfWeek) {
              case 1:
                this.data[i].dayOfWeek1 = '星期一'
                break
              case 2:
                this.data[i].dayOfWeek1 = '星期二'
                break
              case 3:
                this.data[i].dayOfWeek1 = '星期三'
                break
              case 4:
                this.data[i].dayOfWeek1 = '星期四'
                break
              case 5:
                this.data[i].dayOfWeek1 = '星期五'
                break
              case 6:
                this.data[i].dayOfWeek1 = '星期六'
                break
              case 7:
                this.data[i].dayOfWeek1 = '星期日'
                break
            }

            if (this.data[i].mostDays != undefined) {
              this.data[i].mostDays1 = this.data[i].mostDays + '天内'
            }
            if (this.data[i].advanceDays != undefined) {
              this.data[i].advanceDays1 = this.data[i].advanceDays + '天'
            }
            if (this.data[i].num != undefined) {
              this.data[i].num1 = this.data[i].num + '人'
            }
          }
          this.loading2 = false
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    getMuseumList () {
      this.loading2 = true
      this.$http('/stage/museum/getAppMuseumDropDown', {}, 'post', (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + '...'
            }
          }
          this.museumId = this.museumList[0].id
          this.getReservationMuseumTeamRuleDTO()
          // this.$http('/stage/excel/getUserPhone', {}, 'get', (res) => {
          //   if (res.data.code == 200) {
          //     this.phoneText = res.data.data
          //   } else {
          //     this.$Message.error(res.data.msg)
          //   }
          // })
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    close () {
      this.modal = false
    },
    submit () {
      console.log(this.newData)
      console.log(this.timeList)
      if (this.newData.weeks.length == 0) {
        this.$Message.error('请选择星期')
        return
      }
      if (!this.newData.advanceDays&&this.newData.advanceDays!=0) {
        this.$Message.error('请填写提前预约的天数')
        return
      }
      if (!this.newData.mostDays) {
        this.$Message.error('请填写最多预约的天数')
        return
      }
      // for(var i=0;i<this.timeList.length;i++){
      //   if(!this.timeList[i].num){
      //     this.$Message.error("请将限制人数填写完整")
      //     break
      //   }
      // }
      // this.timeList.map(item=>{
      //   if(!item.num){
      //     this.$Message.error("请将限制人数填写完整")
      //     break
      //     return
      //   }

      // })
      this.timeList.map(item => {
        console.log(item.sessionTime)
        item.sessionTime = item.sessionTime[0] + '-' + item.sessionTime[1]
      })
      let data = {
        advanceDays: this.newData.advanceDays,
        mostDays: this.newData.mostDays,
        museumId: this.museumId,
        sessionTimes: this.timeList,
        weeks: this.newData.weeks
      }
      let data1 = {
        advanceDays: this.newData.advanceDays,
        mostDays: this.newData.mostDays,
        museumId: this.museumId,
        sessionTimes: this.timeList,
        dayOfWeek: this.week
      }
      if (this.addOrUpdate) {
        this.$http('/stage/reservation/updateReservationMuseumTeamRule', data1, 'post', (res) => {
          if (res.data.code == 200) {
            this.$Message.success('修改成功')
            this.getReservationMuseumTeamRuleDTO()
            this.modal = false
          } else {
            // this.timeList.map(item => {
            //     console.log(item.sessionTime)
            //     item.sessionTime = item.sessionTime.join(',')
            //   })
            this.$Message.error(res.data.msg)
            this.$http('/stage/reservation/getReservationMuseumTeamRuleDetail', {
              dayOfWeek: this.newData.weeks[0],
              museumId: this.museumId
            }, 'post', (res) => {
              console.log(res)
              if (res.data.code == 200) {
                res.data.data.sessionList.map(item => {
                  item.sessionTime = item.sessionTime.split('-')
                })
                this.timeList = res.data.data.sessionList
              }
            })
            console.log(this.timeList, data1.sessionTimes)
          }
        })
      } else {
        this.$http('/stage/reservation/addReservationMuseumTeamRule', data, 'post', (res) => {
          if (res.data.code == 200 && res.data.data == true) {
            this.$Message.success('一键设置成功')
            this.getReservationMuseumTeamRuleDTO()
            this.newData = {
              advanceDays: '',
              mostDays: '',
              weeks: ['1', '2', '3', '4', '5', '6', '7']
            },
            this.timeList = []
            this.modal = false
          } else {
            this.timeList = []
            this.$http('/stage/reservation/getReservationMuseumArrivalRangeDropdown', {
              museumId: this.museumId
            }, 'get', (res) => {
              console.log(res)
              if (res.data.code == 200) {
                res.data.data.map(item => {
                  this.timeList.push({
                    sessionTime: item.timeRange.split('-'),
                    num: ''
                  })
                })
              }
            })
            this.$Message.error(res.data.msg)
          }
        })
      }
    },
    // add () {
    //   this.timeList.push({ sessionTime: '', num: '' })
    // },
    del (data) {
      let arr = []
      for (let i = 0; i < this.timeList.length; i++) {
        if (i != data) {
          arr.push(this.timeList[i])
        }
      }
      this.timeList = arr
    },
    change () {
      this.current = 1
      this.getReservationMuseumTeamRuleDTO()
    }
  }
}
</script>

<style scoped>

</style>
